const TOOLBAR =[
	{content:"添加", icon:"el-icon-document-add",type:"primary"}
]
const COLUMNS = [
	{prop:"id", label:"单号",width:"50"},
	{prop:"createdate", label:"创建日期",width:"100"},
	{prop:"deptname", label:"部门",width:"100"},
	{prop:"agent", label:"经办人",width:"80"},
	{prop:"company", label:"收款单位",width:"80"},
	{prop:"reciver", label:"收款人",width:"80"},
	{prop:"bankno", label:"账号",width:"100"},
	{prop:"bankname", label:"开户银行",width:"80"},
	{prop:"paytype", label:"付款方式",width:"100"},
	{prop:"amount", label:"付款金额",width:"100"},
	{prop:"content", label:"付款事由",width:"80"},
	{prop:"status", label:"状态",width:"80"},
	{prop:"masterstatus", label:"主管",width:"100"},
	{prop:"approverstatus", label:"审批人",width:"100"},
	{prop:"cashierstatus", label:"出纳",width:"100"},
	{prop:"bookkeeperstatus", label:"会计",width:"100"},
	{prop:"memo", label:"备注",width:"100"}
]
const memoFormRules = {
	memo: [
	    {required: true, message: '请输入备注', trigger: 'blur'}
	]
}
annexRules = {
	// annex: [
	//     {required: true, message: '请上传支付截图', trigger: 'blur'}
	// ],
}
const payRules = {
	deptid: [
	    {required: true, message: '请输入部门', trigger: 'blur'}
	],
	paytype: [
	    {required: true, message: '请输入付款方式', trigger: 'blur'}
	],
	companyid: [
		{required: true, message: '请输入收款单位', trigger: 'blur'}
	],
	bankno: [
		{required: true, message: '请输入账号', trigger: 'blur'}
	],
	bankname: [
		{required: true, message: '请输入开户银行', trigger: 'blur'}
	],
	amount: [
		{required: true, message: '请输入付款金额', trigger: 'blur'}
	],
	content: [
		{required: true, message: '请输入付款事由', trigger: 'blur'}
	],
	reciver: [
		{required: true, message: '请输收款人', trigger: 'blur'}
	],
	agentid: [
        {required: true, message: '请输入经办人', trigger: 'blur'}
    ],
	approverid: [
		{required: true, message: '请输入审批人', trigger: 'blur'}
	],
	cashierid: [
		{required: true, message: '请输入出纳', trigger: 'blur'}
	],
	bookkeeperid: [
		{required: true, message: '请输入会计', trigger: 'blur'}
	]
};
			
let app = new Vue({
    el: "#app",
    data() {
        return {
        	leftbar_show:true,
			// 添加、编辑标识
			tableHeight:window.innerHeight - 180,
			toolbar:TOOLBAR,
			tablecolums:COLUMNS,
			dialogFormVisible:false,
			dialogMemoFormVisible:false,
			queryForm:{
				userid: localStorage.getItem('USERID'),
                keyword: "",
				status:[],
				date:[],
				pageNo:1, // 当前页码
				pagesize:100 ,// 每页记录数
				pagesizes:[10,20,50,100,500]
				
			},
			pagetotal:0,
			pickerOptions: {
			  shortcuts: [{
				text: '最近一周',
				onClick(picker) {
				  const end = new Date()
				  const start = new Date()
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
				  picker.$emit('pick', [start, end])
				}
			  }, {
				text: '最近一个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				  picker.$emit('pick', [start, end]);
				}
			  }, {
				text: '最近三个月',
				onClick(picker) {
				  const end = new Date();
				  const start = new Date();
				  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				  picker.$emit('pick', [start, end]);
				}
			  }]
			},
			payformRules:payRules, // 数据验证规则
			payForm: {
				userid:localStorage.getItem('USERID'),
				id:null,
			    //创建日期
			    createdate:'',
				//部门
			  	deptid:'',
				companyid:'',
				bankno:'',
				bankname:'',
			    //付款金额
			    amount:0,
			    //付款事由
			    content:'',
			    //状态 待审批/已通过
			    status:'',
			    //付款方式
			    paytype:'',
			    //经办人
			    agentid:'',
				// 主管
				masterid:'',
				// 主管状态
				masterstatus:'',
			    //审批人
			    approverid:'',
			    //出纳
			    cashierid:'',
			    //会计
			    bookkeeperid:'',
			    //审批人状态
			    approverstatus:'',
			    //出纳状态
			    cashierstatus:'',
			    //会计状态
			    bookkeeperstatus:'',
				annex:[]
            },
			annexForm:{
				 //付款截图
			    annex:[]
			},
			memoForm:{
			    memo:""
			},
			uploadurl:axios.defaults.baseURL + "api/payform/annex/upload/",
			headers: {
				Token: localStorage.getItem('TOKEN'),
				UserID: localStorage.getItem('USERID')
			},
			userid:	localStorage.getItem('USERID'),
			// 多选
			multipleSelection:[],
			pagedata:[],  // 当前页结果集
			loaded:false,
			// 所有部门
			depts:[],
			// 所有用户
			allusers:[],
			users:[],
			paytypes:['支付宝','微信','对公','现金'],
			statuses:['待审核','已审核','已完成','已作废'],
			companys:[],
			action:"",
			imgdialogVisible:false,
			imgdialogImageUrl:''
        }
    },
	methods: {
		// 显示侧边栏
		showLeftBar() {
			if (this.leftbar_show) {
				this.leftbar_show = false
			} else {
				this.leftbar_show = true
			}
		},
		// 表格多选
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		selectionChange(selection){
			this.selection = selection
		},
		toolAction(acName) {
			if (acName == "添加") {
				this.add()
			} 
		},
		// 确认
		async cofirm(){
            this.$refs.payForm.validate(async valid => {
                if (valid){
					// 显示加载框
					const loading = this.$loading(LOAD_STYLE);
					try {
						let res = null;
						if (this.action=="add") {
							res = await axios.put('api/payform/add', this.payForm);
						} else{
							// 编辑
							res = await axios.put('api/payform/update', this.payForm);
						}
						if (res.code === 200) {
							this.query();
							this.dialogFormVisible = false
						}else {
							this.$message.error(res.message);
						}		
					}catch (e) {
						this.$message.error('添加或编辑请求出错！', e.message);
					}
					// 关闭加载框
					loading.close();
                }
            })			
		},
		start(){
			this.queryForm.pageNo = 1
			this.query()
		},
		// 查询
		async query() {
			// 显示加载框
			const loading = this.$loading(LOAD_STYLE);
			try {
				let res = await axios.post('api/payform/query', this.queryForm);
				if (res.code === 200) {
					this.pagedata = res.data;
					this.pagetotal = res.total;
					this.$message.success(res.message);
				}else {
					this.$message.error(res.message);
				}
			}catch (e) {
				this.$message.error('查询请求出错！', e.message);
			}
			
			// 关闭加载框
			loading.close();
		},

		// 添加
		add() {
			this.action="add";
			this.dialogFormVisible = true;
		    this.payForm= {
				userid:localStorage.getItem('USERID'),
				id:null,
			    //创建日期
			    createdate:'',
				//部门
			  	deptid:'',
				companyid:'',
				bankno:'',
				bankname:'',
			    //付款金额
			    amount:0,
			    //付款事由
			    content:'',
			    //状态 待审批/已通过
			    status:'',
			    //付款方式
			    paytype:'',
			    //经办人
			    agentid:'',
			    //审批人
			    approverid:'',
			    //出纳
			    cashierid:'',
			    //会计
			    bookkeeperid:'',
			    //审批人状态
			    approverstatus:'',
			    //出纳状态
			    cashierstatus:'',
			    //会计状态
			    bookkeeperstatus:'',
				annex:[]
		    }
		    // 如果是复制添加
		    if (this.multipleSelection.length > 0) {
		        // 设定部门人员
		        this.deptChange(this.multipleSelection[0].deptid)
		        // 复制选择的行
		        this.payForm = this.multipleSelection[0]
		    }
		},
		// 审核
		audit(index, row) {
			this.action="edit";
			this.index = index;
			this.dialogFormVisible = true;
			this.payForm = deepCopy(row);
			this.payForm.userid=localStorage.getItem('USERID')
			this.getUser(row.deptid);
			return true;
			
		},
		// 是否显示审核
		showAudit(index, row) {
			if (row.status=="已作废") {
				return false;
			} else if (row.masterid == localStorage.getItem('USERID') && row.masterstatus.indexOf("待审核") >0) {
				return true;
			} else if (row.approverid == localStorage.getItem('USERID') && row.approverstatus.indexOf("待审核") >0) {
				return true;
			} else if (row.cashierid == localStorage.getItem('USERID') && row.cashierstatus.indexOf("待审核")>0) {
				return true;
			} else if (row.bookkeeperid == localStorage.getItem('USERID') && row.bookkeeperstatus.indexOf("待审核")>0) {
				return true;
			} else {
				return false;
			}
		},
		// 查看
		view(index, row) {
			this.action="view";
			this.index = index;
			this.dialogFormVisible = true;
			this.payForm = deepCopy(row);
			this.payForm.userid=localStorage.getItem('USERID')
			this.getUser(row.deptid);
			return true;
			
		},
		// 显示备注对话框
		showMemoForm() {
			this.dialogMemoFormVisible = true;
		},
		async del() {
			// 作废
			this.$refs.memoForm.validate(async valid => {
				if (valid){
					// 显示加载框
					const loading = this.$loading(LOAD_STYLE);
					try {
						this.payForm.memo = this.memoForm.memo;
						let res = await axios.put('api/payform/delete', this.payForm);
						if (res.code === 200) {
							this.query();
							this.dialogMemoFormVisible = false;
							this.dialogFormVisible = false
						}else {
							this.$message.error(res.message);
						}
					}catch (e) {
						this.$message.error('作废请求出错！', e.message);
					}
					// 关闭加载框
					loading.close();
				}
			})
		},
		async handleRemove(file, filelist) {
			var param = {"payformid":this.payForm.id, 
									"filelist":filelist,
									"removefile":file
								}
			res = await axios.put('api/payform/updateallannex', param);
			if (res.code === 200) {
				this.payForm.annex = this.createTempfilelist(filelist);
			}else {
				this.$message.error(res.message);
			}		
		},
		handledownloadPreview(file) {
			this.imgdialogImageUrl = file.url;
			this.imgdialogVisible = true;
		},
		handleAvatarSuccess(res, file, filelist) {
			this.payForm.annex = this.createTempfilelist(filelist);
		},
		beforeAvatarUpload(file) {
			const isLt20M = file.size / 1024 / 1024 < 20;
			if (!isLt20M) {
				this.$message.error('上传图片大小不能超过 20MB!');
				return false;
			}
			return true;
		},
		createTempfilelist(filelist) {
			var tempfilelist = []
			for (let s of filelist) {
				if (typeof(s.response) != "undefined") {
					tempfilelist.push({
						name: s.response.data.name,
						url: s.response.data.url
					});
				} else {
					tempfilelist.push({
						name: s.name,
						url: s.url
					});
				}
			}
			return tempfilelist;
		},

		// 设定表格当前页
		handleCurrentPageChange (selectedPageNo) {
		  this.queryForm.pageNo = selectedPageNo
		  // 加载数据页
		  this.query()
		},
		// 取得所有部门列表
		async getAllDept() {
			// 显示加载框
			const loading = this.$loading(LOAD_STYLE);
			try {
				let res = await axios.get('api/alldept');
				if (res.code === 200) {
					this.depts = res.data;
				}else {
					this.$message.error(res.message);
				}
			}catch (e) {
				this.$message.error('请求出错！', e.message);
			}
			
			// 关闭加载框
			loading.close();
		},
		// 部门变更
		deptChange(value) {
		
			this.getUser(value);
		},
		
		// 取得部门用户列表
		async getUser(deptid) {
			// 显示加载框
			const loading = this.$loading(LOAD_STYLE);
			try {
				let res = await axios.post('api/user',{"dept":[deptid]});
				if (res.code === 200) {
					this.users = res.data;
				} else {
					this.$message.error(res.message);
				}
			} catch (e) {
				this.$message.error('取得部门用户列表请求出错！', e.message);
			}

			// 关闭加载框
			loading.close();

		},
		// 取得所有用户列表
		async getAllUser() {
			// 显示加载框
			const loading = this.$loading(LOAD_STYLE);
			try {
				let res = await axios.get('api/user/all');
				if (res.code === 200) {
					this.allusers = res.data;
				} else {
					this.$message.error(res.message);
				}
			} catch (e) {
				this.$message.error('取得所有用户列表请求出错！', e.message);
			}

			// 关闭加载框
			loading.close();

		},
		// 取得所有供应商列表
		async getSupplierList() {
			// 显示加载框
			const loading = this.$loading(LOAD_STYLE);
			try {
				let res = await axios.get('api/supplier/list');
				if (res.code === 200) {
					this.companys = res.data;
				} else {
					this.$message.error(res.message);
				}
			} catch (e) {
				this.$message.error('取得所有供应商列表请求出错！', e.message);
			}

			// 关闭加载框
			loading.close();

		},

	},
	async mounted() {
		// 自动调整表格高度
		window.onresize = () => {
		  return (() => {
			this.tableHeight = window.innerHeight - 180
		  })()
		}
		//初始化部门列表
		this.getAllDept();
		//初始化供应商列表
		this.getSupplierList();
		//初始化用户列表
		this.getAllUser();
	}
});	